<template>
<!-- 侯程封装的组件 -->
  <div class="global-quill-editor">
    <el-form>
      <el-form-item>
        <quill-editor
          ref="myGQuillEditor"
          v-model="content"
          :options="editorOption"
          class="editor"
          @blur="onEditorBlur"
          @focus="onEditorFocus"
          @change="onEditorChange"
        >
        </quill-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import 'highlight.js/styles/xcode.css'
import hljs from 'highlight.js'
// 工具栏配置项
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote'],
  ['code-block'],
  ['image'],
  ['link']
]

export default {
  name: 'GlobalQuillEditor',
  props: {
    // questionStem: String
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: toolbarOptions,
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        theme: 'snow'
      }
    }
  },
  methods: {
    // 失去焦点事件
    onEditorBlur (e) {
      // console.log('onEditorBlur: ', e)
      // console.log(e)
      // 获取 富文本的内容（题干）
      // this.content = this.resetHtml(this.content)
      // 子传父
      this.$emit('update:answer', this.content)
      this.$emit('update:question', this.content)
      this.$emit('onEditorBlur')
    },
    // 对带有HTML标签的字符串进行处理为 没有标签的字符串
    // resetHtml (str) {
    //   return str.replace(/<[^>]*>/g, '')
    // },
    // 获得焦点事件
    onEditorFocus (e) {
      // console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange (e) {
      // console.log('onEditorChange: ', e)
    },
    init (text) {
      this.content = text
    }

  }
}
</script>

<style scoped lang="scss">
.editor{
  border: 2px solid  #fff;
}
::v-deep .editor {
  position: relative;
  // left: 65px;
  height: 300px;
  margin-bottom: 25px;
  width: 900px;
  .ql-toolbar.ql-snow {
    padding: 0;
  }
}
</style>
